<template>
  <view class="order-detail">
    <!-- 订单基本信息 -->
    <view class="order-info">
      <view class="info-item">
        <text class="label">订单号：</text>
        <text class="value">{{ orderInfo.order_no }}</text>
      </view>
      <view class="info-item">
        <text class="label">配送方式：</text>
        <text class="value">{{ deliveryMap[orderInfo.delivery] }}</text>
      </view>
      <view class="info-item">
        <text class="label">配送地址：</text>
        <text class="value" v-if="orderInfo.address_data">
          {{ orderInfo.address_data.group_name }}
        </text>
      </view>
      <view class="info-item" v-if="orderInfo.address_data">
        <text class="label">详细地址：</text>
        <text class="value">
          {{ orderInfo.address_data.detail }}
        </text>
      </view>
      <view class="info-item">
        <text class="label">订单状态：</text>
        <text class="">{{ statusMap[orderInfo.status] }}</text>
      </view>
      <view class="info-item">
        <text class="label">下单时间：</text>
        <text class="value">{{ orderInfo.createtime }}</text>
      </view>
      <view class="info-item">
        <text class="label">完成时间：</text>
        <text class="value" v-if="orderInfo.complete_time">
          {{ orderInfo.complete_time }}
        </text>
      </view>
      <view class="info-item">
        <text class="label">备注：</text>
        <text class="value" v-if="orderInfo.remarks">
          {{ orderInfo.remarks }}
        </text>
      </view>
      <view class="ikz-receive-box" v-if="orderInfo.receive.nickname">
        <view class="ikz-receive-box-top">
          <view class="ikz-receive-title">
            <image
              class="ikz-receive-img"
              src="/static/campus/receive.png"
            ></image>
            抢单员
          </view>
        </view>
        <view
          class="ikz-detail-phone"
          @click="getPhone(orderInfo.receive.mobile)"
        >
          <image src="/static/phone.png" class="ikz-detail-phone-img"></image>
          <text class="phone-number">{{ orderInfo.receive.mobile }}</text>
        </view>
      </view>
      <view class="ikz-receive-box" v-if="orderInfo.address_data.name">
        <view class="ikz-receive-box-top">
          <view class="ikz-receive-title">
            <image
              class="ikz-receive-img"
              src="/static/campus/receive.png"
            ></image>
            用户
          </view>
        </view>
        <view
          class="ikz-detail-phone"
          @click="getPhone(orderInfo.address_data.mobile)"
        >
          <image src="/static/phone.png" class="ikz-detail-phone-img"></image>
          <text class="phone-number">{{ orderInfo.address_data.mobile }}</text>
        </view>
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="goods-info">
      <view
        class="goods-item"
        v-for="(item, index) in orderInfo.goods"
        :key="index"
      >
        <image
          class="goods-image"
          :src="'https://dexinhebei.com/' + item.image"
        ></image>
        <view class="goods-detail">
          <text class="goods-name">{{ item.name }}</text>
          <text class="goods-price">￥{{ orderInfo.total_fee }}</text>
          <text class="goods-count">数量：{{ orderInfo.total_count }}</text>
        </view>
      </view>
    </view>

    <view v-if="scanCode && orderInfo.status == 2"
      style="
        background: linear-gradient(135deg, #00bcd4, #00bcd4);
        color: #ffffff;
        text-align: center;
        padding: 30rpx;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
      "
      class="ikz-sticky-btn4"
      @click="submit(orderInfo.id)"
      >完成自取订单</view
    >

    <view
      v-if="orderInfo.status == 1"
      class="ikz-sticky-btn4"
      style="
        background: linear-gradient(135deg, #902a0c, #902a0c);
        color: #ffffff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
        text-align: center;
      "
      @click.stop="getRefund(1)"
    >
      待接单
    </view>
    <view
      v-if="orderInfo.status == 2"
      class="ikz-sticky-btn4"
      style="
        background: linear-gradient(135deg, #510c90, #510c90);
        color: #ffffff;
        text-align: center;
        padding: 30rpx;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
      "
      @click.stop="getRefund(2)"
    >
      退款
    </view>

    <view
      v-if="orderInfo.status == 2"
      class="ikz-sticky-btn4"
      style="
        background: linear-gradient(135deg, #ff9800, #ff9800);
        color: #ffffff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
        text-align: center;
      "
      @click.stop="getRefund(3)"
    >
      确认收货
    </view>

    <view
      v-if="orderInfo.status == 3"
      class="ikz-sticky-btn4"
      style="
        background: #d4d4d4;
        color: #999;
        padding: 30rpx;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
        text-align: center;
      "
    >
      已完成
    </view>
    <view
      v-if="orderInfo.status == 4"
      class="ikz-sticky-btn4"
      style="
        background: #d4d4d4;
        color: #999;
        padding: 30rpx;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
        text-align: center;
      "
    >
      已取消
    </view>
    <view
      v-if="orderInfo.status == 0"
      class="ikz-sticky-btn4"
      style="
        background: linear-gradient(135deg, #ff6565, #d54242);
        color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        margin-top: 40rpx;
        text-align: center;
      "
    >
      待付款
    </view>
  </view>
</template>

<script>
import ikz from "@/pages/Common/tools.js";
export default {
  data() {
    return {
      orderInfo: {},
      scanCode:false,
      deliveryMap: {
        1: "自提",
        2: "配送",
      },
      statusMap: {
        0: "待付款",
        1: "待接单",
        2: "待确认",
        3: "已完成",
        4: "已取消",
      },
      id: "",
    };
  },
  onLoad(options) {
    console.log(options);

    // uni.showModal({
    //   title: "提示",
    //   content: options.id,
    //   success: (res) => {},
    // });

    if (options.id) {
      this.id = options.id;
      this.scanCode = options.scanCode;
      this.orderList();
    }
  },
  methods: {
    submit(id) {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "是否确认用户已拿到物品？",
        success: function (res) {
          if (res.confirm) {
            var path = "/xyb/supermarket/order/confirm_complete";
            var data = {
              id: id,
            };
            uni.showLoading({
              title: "加载中",
              mask: true,
            });
            ikz.post(path, data, (res) => {
              if (res.data.code) {
                uni.showToast({
                  title: "确认取货成功",
                  duration: 2000,
                });
                that.detailInfo((res) => {});
                that.$forceUpdate();
              } else {
                uni.showModal({
                  title: "提示",
                  content: res.data.msg,
                  showCancel: false,
                  success: function (res) {},
                });
              }
              uni.hideLoading();
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    getPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },
    getRefund(value) {
      uni.showModal({
        title: "提示",
        content: value == 1 ? "待接单" : value == 2 ? "退款" : "确认收货",
        success: (res) => {
          if (res.confirm) {
            uni.showModal({
              title: "提示",
              content:
                value == 1
                  ? "抢单操作只能在电脑端进行，是否前往电脑端？"
                  : value == 2
                  ? "退款操作只能在电脑端进行，是否前往电脑端？"
                  : "确认收货操作只能在电脑端进行，是否前往电脑端？",
              success: (res) => {
                if (res.confirm) {
                  // 跳转到电脑端页面
                  uni.navigateTo({
                    url: "/pages/Webview/index?path=https://dexinhebei.com/ZNqLOsRjSe.php/index/login",
                  });
                } else if (res.cancel) {
                  console.log("用户取消跳转");
                }
              },
            });
          } else if (res.cancel) {
            console.log("用户取消退款");
          }
        },
      });
    },
    orderList() {
      var path = "/xyb/supermarket/order/businessOrder";
      var data = {
        id: this.id,
      };
      ikz.post(path, data, (res) => {
        if (res.data.code) {
          this.orderInfo = res.data.data[0];
        }
      });
    },
  },
};
</script>

<style scoped>
.order-detail {
  padding: 30rpx;
  background: #f8f9fa;
  min-height: 100vh;
}

.ikz-detail-phone {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #85b2ff;
  color: #fff;
  padding: 20rpx;
  margin-top: 20rpx;
}

.ikz-detail-phone-img {
  width: 30rpx;
  height: 30rpx;
  margin-right: 15rpx;
}

.phone-number {
  margin-left: 10rpx;
}

.ikz-receive-user {
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  margin-bottom: 30rpx;
}

.ikz-receive-user-img {
  margin-right: 20rpx;
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.ikz-receive-img {
  margin-right: 15rpx;
  width: 40rpx;
  height: 40rpx;
}

.ikz-receive-title {
  display: flex;
  align-items: center;
}

.ikz-receive-box {
  margin-bottom: 40rpx;
  background: #fff;
  border-radius: 15rpx;
  overflow: hidden;
}

.ikz-receive-box-top {
  box-sizing: border-box;
}

.ikz-sticky-btn,
.ikz-sticky-btn4,
.ikz-sticky-btn3 {
  padding: 12rpx 22rpx;
  border-radius: 40rpx;
  font-size: 27rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  outline: none;
  flex-shrink: 0;
}

.order-info {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
  padding: 12rpx 0;
}

.label {
  color: #666;
  width: 140rpx;
  font-size: 28rpx;
}

.value {
  color: #333;
  flex: 1;
  font-size: 28rpx;
  font-weight: 500;
  white-space: nowrap; /* 禁止换行 */
}

.status-0 {
  color: #ff6565;
}

.status-1 {
  color: #fdaf66;
}

.status-2 {
  color: #76a8fd;
}

.status-3 {
  color: #42d5be;
}

.status-4 {
  color: #999;
}

.goods-info {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.goods-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  margin-right: 30rpx;
  object-fit: cover;
}

.goods-detail {
  flex: 1;
}

.goods-name {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  display: block;
}

.goods-price {
  font-size: 32rpx;
  color: #ff6565;
  font-weight: bold;
  margin-bottom: 12rpx;
  display: block;
}

.goods-count {
  font-size: 28rpx;
  color: #666;
  background: #f5f5f5;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  display: inline-block;
}
</style>